<template>
	<view class="container">
		<header>
			<view class="head-top">
				<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png'
					mode="widthFix"></image>
				<view :style="{'height': navBarHeight+'px'}" class="serch_l"
					@click="$goPath(4, '/pages/premiumBag/home/index')">
					<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/back.png" class="back"
						mode="aspectFill" @click="$goPath(4, '/pages/premiumBag/home/index')">
					</image>
					<text>
						返回
					</text>
				</view>
				<view class="head-search">
					<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/logo.png"
						mode="aspectFill"></image>
					<view class="search">
						<u-search placeholder="搜索" v-model="searchVal" bgColor="transparent" searchIconColor="#fff" color="#666666"
							placeholderColor="#666666" @search="handleSearch" @custom="handleSearch" @clear="handleClear">
						</u-search>
					</view>
				</view>
			</view>
			<!-- 公告 -->
			<view class="head-horseLamp">
				<view class="notice">
					<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/horseLamp-icon.png"
						mode="aspectFill"></image>
					<view class="bars">
						<u-notice-bar icon=" " :text='noticeValue' bgColor="transparent" speed="80"></u-notice-bar>
					</view>
				</view>
			</view>
			<view class="swiper">
				<u-swiper :list="swiperList" indicator indicatorMode="line" circular keyName="image" imgMode="scaleToFill"
					@click="swiperChange"></u-swiper>
			</view>
			<view class="grid">
				<view class="menu">
					<view class="item" v-for="(item, index) in gridList" :key="index" @click="menuChange(item)">
						<image class="grid-img" :src="item.icon"></image>
						{{ item.name }}
					</view>
				</view>
			</view>

			<!-- 轮播 -->
			<!-- 			<view class="banner">
				<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeBanner.png" mode="widthFix"></image>
			</view> -->
		</header>

		<view class='home-content'>
			<view class="content">
				<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/stick.png'
					mode='aspectFit|aspectFill|widthFix' alt="" />
				<view class='goods-content'>
					<!-- <view class="tabTop">
						<u-tabs :list="tabTopList" @change="tabTopChange" lineWidth="20" lineHeight="7"
							:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
								color: '#FF6701FF',
								fontWeight: 'bold',
								transform: 'scale(1.05)'
							}" :inactiveStyle="{ color: '#606266', transform: 'scale(1)' }"
							itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
						</u-tabs>
					</view> -->

					<view class='home-title'>
						<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/home-title.png'
							mode='widthFix' alt="" />
					</view>

					<view class='goods-list' v-if="goodsList.length > 0">
						<view class='goods-item' v-for="(item, index) in goodsList" :key="index"
							@click="$goPath(2, `/pages/pocketShop/home/goodsDetail?productId=${item.id}`)">
							<view class='goods-item-img'>
								<image :src="item.thumbnail" mode='widthFix' alt="" />
								<view class="limit-icon" v-if="item.limitation == 1">限购{{ item.limitationCount }}件</view>
							</view>
							<view class='goods-item-content'>
								<view class='goods-item-name'>{{ item.name }}</view>
								<view class='goods-item-price'>
									<view class='price' v-if="item.limitation == 1">
										<view>
											<view style=" margin-right: 10rpx;">￥<text style="font-size: 40rpx;font-family: 'DIN-Bold';">{{
												item.limitationPrice }}</text></view>
											<view style="font-size: 24rpx;">￥<text
													style="text-decoration: line-through;font-size: 24rpx;font-family: 'DIN-Medium';">{{
														item.showPrice }}</text>
											</view>
										</view>
									</view>

									<view class='price' v-else>
										<view>￥<text>{{ item.showPrice }}</text></view>
									</view>

									<view class='add-cart' @click.stop="addCart(item)">
										<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/cart-new.png'
											mode='aspectFit|aspectFill|widthFix' alt="" />
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="bill-empty" v-else>
						<image style="width: 620rpx; height: 308rpx;"
							src="https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/3b838297-ad51-4cab-b31d-0b9f568f7a6d.png"
							mode="aspectFit|aspectFill|widthFix"></image>
						<view>这里暂时什么都没有哦</view>
					</view>
				</view>
			</view>
		</view>

		<view class='sign-icon' v-if="signIconShow">
			<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/sign-icon.png' mode='widthFix'
				alt="" @click="onClickSign" />
		</view>

		<uni-popup ref="signInPopup" style="z-index: 1000;">
			<view class="popup-signIn">
				<header>
					<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/sigin-titleIcon.png"
						mode='widthFix' alt="" />
				</header>
				<section>
					<view class='sect-box'>
						<view class='sect-bigBox1' v-if="JSON.stringify(signDetail) === '{}'">
							<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/sign-bigBox.png'
								mode='widthFix' alt="" />
						</view>
						<view class='sect-bigBox sect-bigBox2' v-else>
							<view>恭喜获得</view>
							<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/sign-money.png'
								mode='widthFix' alt="" />
							<view class='sign-money'>￥<text>{{ signDetail.amount || 0 }}</text>元</view>
						</view>
					</view>
					<view class='sect-btn' v-if="JSON.stringify(signDetail) === '{}'" @click="handleSign">签到</view>
					<view class='sect-btn' v-else>已签到</view>
				</section>
			</view>
		</uni-popup>

		<uni-popup ref="showSignRewardPopup" style="z-index: 1000;">
			<view class='sign-modalBox'>
				<view class='sign-modalBox-title'>恭喜获得</view>
				<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/sign-money.png'
					mode='widthFix' alt="" />
				<view class='sign-money'>￥<text>{{ signDetail.amount || 0 }}</text>元</view>
			</view>
		</uni-popup>
		<u-popup :show="showLoading" @open="showLoading = true" mode="center" bgColor="transparent">
			<view class="loading_popup">
				<view class="loading_title">
					尊敬的用户：
				</view>
				<view class="loading_box" v-html="loadingValue">
				</view>
				<view class="loading_btn" @click="showLoading = false">
					确认
				</view>
			</view>
		</u-popup>


		<tabbar :currentTab='0' :type="0" :scroll="scroll" ref="child" @scrollTop="scrollTop" />
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/common/auth'
	import {
		getNavBarHeight
	} from '@/common/public'
	export default {
		data() {
			return {
				value: 1,
				searchVal: '', //搜索数据
				noticeValue: '', //公告数据
				goodsList: [], //列表数据
				pageCurrent: 1,
				total: 0,
				signIconShow: false, //签到小图标
				signDetail: {},
				signStart: '',
				signEnd: '',

				itemWidth: 0, //每个item的宽度
				totalWidth: 670, //设置一个默认总宽度
				scrollLeft: 0, //滑动距离
				tabTopList: [],
				categoryId: '',
				scroll: 0,
				lineBg: "",

				swiperList: [],
				gridList: [],
				afterArr: [],
				frontArr: [],
				showLoading: false,
				loadingValue: '',
				navBarHeight: 0, //导航栏高度
			}
		},

		onShow() {
			if (getUserInfo()) {
				this.getSignTime()
				this.getCartList()
			}
			this.categoryId = ''
			this.gethorselamp()
			this.getGoodsList()
			this.getTabs()
			this.getBanner()
		},
		onLoad() {
			//隐藏官方的tabBar
			uni.hideTabBar()
			// this.getisLoading();
			// this.getLoading();
			this.navBarHeight = getNavBarHeight()
		},
		onPageScroll(e) {
			this.$refs.child.printScroll(e.scrollTop);
		},
		methods: {
			// 获取公告弹窗是否弹出
			async getisLoading() {
				let pageWechat = uni.getStorageSync("pageWechat")
				let result = await this.$request.systemSettingsGet({
					key: 'home_page_windows_on'
				})
				if (result.data?.settingValue == '1' && pageWechat == '') {
					this.showLoading = true
					uni.setStorageSync("pageWechat", 1)
				} else {
					this.showLoading = false
				}
			},
			// 获取公告弹窗内容
			async getLoading() {
				let result = await this.$request.systemSettingsGet({
					key: 'home_page_windows'
				})
				this.loadingValue = '&nbsp&nbsp&nbsp&nbsp' + result.data?.settingValue;
			},
			async getBanner() {
				let result = await this.$request.bannerList()
				this.swiperList = result.data
			},
			swiperChange(e) {
				let link = this.swiperList[e].link
				this.$goPath(2, `/pages/pocketShop/home/goodsDetail?productId=${link}`)
			},
			scrollTop(e) {
				console.log(e)
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 300 // 滚动动画的时长
				})
			},
			menuChange(item) {
				if (item.id == '99') {
					if (this.gridList.length <= 8) {
						if (this.afterArr.length != 0) {
							for (let i in this.afterArr) {
								this.gridList.push(this.afterArr[i])
							}
						}
					} else {
						this.gridList = this.gridList.slice(0, 8)
					}
				} else {
					this.categoryId = item.id
					this.pageCurrent = 1;
					this.goodsList = [];
					this.getGoodsList()
				}
			},
			tabTopChange(item) {
				this.categoryId = item.id
				this.pageCurrent = 1;
				this.goodsList = [];
				this.getGoodsList()
			},
			async getTabs() {
				let result = await this.$request.categoryList()
				let arr = result.data
				this.frontArr = arr.slice(0, 6)
				this.afterArr = arr.slice(6)
				this.frontArr.unshift({
					id: '',
					icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/all.png',
					name: '全部'
				})
				this.frontArr.push({
					id: '99',
					icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/more.png',
					name: '更多'
				})
				this.tabTopList = arr
				this.gridList = this.frontArr
			},
			//加入购物车
			addCart(value) {
				const {
					cartList
				} = this;
				let isAdd = false;

				let info = getUserInfo()
				if (!info) return this.$toast('您还未登录，先去登录吧!')

				let result = cartList.some((item) => {
					if (item.productId == value.id) {
						return true;
					}
				});

				if (value.limitation == 1) {
					if (value.purchasedCount < value.limitationCount) {

						if (result) {
							cartList.map((item, index) => {
								if (value.limitationSell) {
									isAdd = true;
									if (item.productId === value.id && (item.count + value.purchasedCount) >= value.limitationCount) {
										this.$toast('用户购买超过限购数量，超过部分根据原价销售')
									}
								} else {
									if (item.productId === value.id && (item.count + value.purchasedCount) >= value.limitationCount) {
										this.$toast('用户购买超过限购数量，不可购买')
										isAdd = false;
										return;
									} else if (item.productId === value.id && (item.count + value.purchasedCount) < value
										.limitationCount) {
										isAdd = true;
									}
								}
							});
						} else {
							isAdd = true;
							this.$toast('已加入购物车', 2000)
						}
					} else {
						if (value.limitationSell) {
							this.$toast('用户购买超过限购数量，超过部分根据原价销售')
							isAdd = true;
						} else {
							this.$toast('用户购买超过限购数量，不可购买')
						}
					}

				} else {
					isAdd = true;
				}
				if (isAdd) {
					const param = {
						userId: info.userId,
						productIdList: [value.id]
					};
					this.$request.shoppingAdd(param).then(res => {
						if (res.code == 200 && res.isSuccess) {
							this.$toast('已加入购物车')
							this.getCartList();
						} else {
							this.$toast(res.msg)
						}
					});
				}
			},
			// 获取跑马灯内容
			async gethorselamp() {
				let result = await this.$request.systemSettingsGet({
					key: 'horse_lamp'
				})
				this.noticeValue = result.data?.settingValue;
			},
			//商品列表
			async getGoodsList() {
				uni.showLoading({
					title: '加载中'
				});
				let info = getUserInfo();
				const param = {
					page: {
						current: this.pageCurrent,
						size: 20
					},
					query: {
						userId: info.userId
					}
				};
				if (this.searchVal) {
					param.query.name = this.searchVal;
				}
				if (this.categoryId) {
					param.query.categoryId = this.categoryId;
				}
				let result = await this.$request.homeFindByPage(param)
				const {
					records,
					total
				} = result.data;
				this.total = total
				this.goodsList = this.goodsList.concat(records)
				uni.hideLoading();
			},
			// 获取签到时间
			async getSignTime() {
				let signStart = await this.$request.systemSettingsGet({
					key: 'user_sign_start'
				})
				let signEnd = await this.$request.systemSettingsGet({
					key: 'user_sign_end'
				})
				this.signStart = signStart.data.settingValue.split(':')[0];
				this.signEnd = signEnd.data.settingValue.split(':')[0];
				this.getSignDetail()
			},
			//获取签到情况
			async getSignDetail() {
				let info = getUserInfo()
				let myDate = new Date();
				let year = myDate.getFullYear() // 当前年份四位数
				let month = myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() +
					1 // 月份为0-11，在10月前更改为01格式
				let toDay = myDate.toLocaleDateString().replace(/\//g, "-"); //获取当前日期
				let platform = uni.getSystemInfoSync().platform;
				let dateTime = [];
				if (platform == 'ios') {
					let list = toDay.split('-');
					list.map(item => {
						if (item.length == 4) {
							dateTime.unshift(item);
						} else {
							dateTime.push(item);
						}
					});
					dateTime = dateTime.join('-');
				} else {
					dateTime = year + '-' + month + '-' + myDate.getDate()
				};
				const param = {
					userId: info.userId,
					date: dateTime
				}
				let nowHours = myDate.getHours();
				let result = await this.$request.userSignDetail(param)
				if (nowHours >= this.signStart && nowHours < this.signEnd) {
					if (result.data == null) {
						this.$refs.signInPopup.open('bottom')
					}
					this.signIconShow = true;
				} else {
					this.signIconShow = false;
				}
				this.signDetail = result.data || {}
			},
			//获取购物车列表
			async getCartList() {
				let info = getUserInfo()
				let result = await this.$request.shoppingList({
					userId: info.userId
				})
				this.cartList = result.data;
			},
			// 点击签到
			onClickSign() {
				this.$refs.signInPopup.open('bottom');
			},
			// 签到确认
			handleSign() {
				let info = getUserInfo()
				this.$request.userSign({
					userId: info.userId
				}).then(res => {
					this.$refs.signInPopup.close();
					this.$refs.showSignRewardPopup.open('center');
					this.getSignDetail();
				});
			},
			//搜索
			handleSearch() {
				this.pageCurrent = 1;
				this.goodsList = [];
				this.getGoodsList();
			},
			//清空搜索框
			handleClear() {
				this.pageCurrent = 1;
				this.goodsList = [];
				this.getGoodsList();
			},
			onReachBottom() {
				let {
					pageCurrent,
					total,
					goodsList
				} = this;
				if (total > goodsList.length) {
					pageCurrent++;
					this.pageCurrent = pageCurrent;
					this.getGoodsList();
				} else {
					this.$toast('暂无更多...')
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		font-family: 'PingFang SC-Medium';
		background-color: #32B499;
		font-size: 28rpx;
		color: #333;
		overflow-x: hidden;
		overflow-y: auto;

		// 头部
		header {
			.head-top {
				width: 100%;
				position: relative;
				margin-bottom: 24rpx;

				image {
					width: 100%;
					height: auto;
					display: block;
				}

				.serch_l {
					width: 100%;
					height: auto;
					display: block;
					position: relative;
					bottom: 80rpx;
					left: 24rpx;
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 40rpx;
						display: block;
					}

					text {
						color: #fff;
						font-weight: bold;
						font-size: 28rpx;
						padding-left: 12rpx;
					}
				}

				.head-search {
					display: flex;
					align-items: center;
					padding: 0 24rpx;
					box-sizing: border-box;
					width: 100%;
					position: absolute;
					bottom: 0;

					image {
						width: 172rpx;
						height: 48rpx;
						display: block;
					}

					.search {
						flex: 1;
						height: 64rpx;
						background: rgba(255, 255, 255, 0.6);
						border-radius: 32rpx;
						margin-left: 24rpx;
					}
				}
			}

			.swiper {
				width: 720rpx;
				// height: 380rpx;
				margin: 0 auto;
			}

			.grid {
				.menu {
					display: grid;
					grid-template-columns: repeat(auto-fill, 80px);
					/** 平铺宽度为100px的单元格 */
					grid-template-rows: 90px;
					/** 当容易高度不够时，多余的组件高度将怎么分配，默认的高度由单元格内容决定 */
					justify-content: center;
					/** 水平居中  */
					grid-gap: 20rpx;
					/** 水平和垂直间距为10rpx*/
					padding: 10rpx;

					.item {
						// margin: 10rpx;
						font-size: 24rpx;
						/*设置边框 */
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: #fff;

						.grid-img {
							width: 100rpx;
							height: 100rpx;
							margin: 15rpx;
						}
					}
				}
			}

			.head-horseLamp {
				padding: 0 24rpx;
				box-sizing: border-box;
				overflow: hidden;

				.notice {
					width: 100%;
					height: 100rpx;
					background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/horseLamp-bgImg.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					margin-bottom: 24rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					padding: 0 24rpx;
					padding-bottom: 4rpx;
					padding-right: 96rpx;
					box-sizing: border-box;
					overflow: hidden;

					image {
						width: 68rpx;
						height: 92rpx;
						display: block;
						position: relative;
						top: 0;
						z-index: 100;
					}

					.bars {
						width: 515rpx;
						// flex: 1;
						// opacity: 1;
					}
				}
			}

			.banner {
				width: 100%;
				height: auto;

				image {
					width: 100%;
					height: auto;
					display: block;
				}
			}
		}

		.home-content {
			// position: relative;
			// top: -110rpx;
			background: #FFEE92;
			border-radius: 23rpx;
			padding-top: 10rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.content {
				background-color: #FFBD32;
				border-radius: 32rpx;
				padding: 16rpx 12rpx;
				/* 兼容 iOS < 11.2 */
				padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
				/* 兼容 iOS >= 11.2 */
				padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
				box-sizing: border-box;

				image {
					width: 100%;
					height: 16rpx;
					display: block;
				}

				.goods-content {
					background-color: #fff;
					padding-left: 20rpx;
					padding-right: 0;
					padding-top: 8rpx;
					margin: 0 10rpx;
					box-sizing: border-box;
					border-radius: 0 0 16rpx 16rpx;



					.tabTop {
						background: #FFFFFF;
						height: 80rpx;
						margin: 30rpx 0;
					}

					/* 隐藏滚动条样式 */
					::-webkit-scrollbar {
						width: 0;
						height: 0;
					}

					.box {
						display: flex;
						align-items: center;
					}

					.tabTopItem {
						text-align: center;
						line-height: 60rpx;
						font-size: 26rpx;
						color: #8D9199;
						margin: 0 10px;
					}

					.active {
						font-size: 30rpx;
						border: 1px solid #FF6701FF;
						color: #FF6701FF;
						padding: 0 12rpx;
						border-radius: 10rpx;
					}

					// 右滑动
					.slide-right {
						animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					}

					// 左滑动
					.slide-left {
						animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					}

					// 定义动画-左滑动
					@keyframes slide-left {
						0% {
							transform: translateX(100rpx);
						}

						100% {
							transform: translateX(0);
						}
					}

					// 定义动画-右滑动
					@keyframes slide-right {
						0% {
							transform: translateX(-100rpx);
						}

						100% {
							transform: translateX(0);
						}
					}


					.home-title {
						width: 100%;
						position: relative;
						margin-bottom: 10rpx;

						image {
							width: 100%;
							height: auto;
							display: block;
						}
					}

					.goods-list {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding-right: 20rpx;
						box-sizing: border-box;

						.goods-item {
							width: 48.5%;
							margin-bottom: 20rpx;
							padding: 8rpx;
							box-sizing: border-box;
							font-size: 28rpx;
							font-family: 'PingFang SC-Medium';
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							border: 6rpx solid #32B499;
							border-radius: 24rpx;

							.goods-item-name {
								width: 100%;
								height: 72rpx;
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								/* 设置超过为省略号的行数 */
								overflow: hidden;
								margin-top: 6rpx;
								margin-bottom: 14rpx;
							}

							.goods-item-img {
								width: 100%;
								height: auto;
								display: block;
								position: relative;

								image {
									width: 100%;
									height: 100%;
									display: block;
									border-radius: 16rpx 16rpx 0 0;
								}

								.limit-icon {
									position: absolute;
									left: 0;
									top: 0;
									background-color: #EA5F5F;
									color: #fff;
									border-radius: 16rpx 0 16rpx 0;
									font-size: 24rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									padding: 6rpx 24rpx;
									box-sizing: border-box;
								}

							}

							.goods-item-content {
								width: 100%;
								background-color: #32B499;
								background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/goods-icon.png');
								background-repeat: no-repeat;
								background-size: 100% 100%;
								border-radius: 0 0 16rpx 16rpx;
								padding: 12rpx;
								color: #fff;
								box-sizing: border-box;

								.goods-item-name {
									width: 100%;
									height: 72rpx;
									font-size: 28rpx;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									/* 设置超过为省略号的行数 */
									overflow: hidden;
									margin-top: 6rpx;
									margin-bottom: 14rpx;
								}

								.goods-item-price {
									width: 100%;
									display: flex;
									justify-content: space-between;
									align-items: center;

									.price {
										view {
											font-size: 28rpx;
											font-family: 'DIN-Medium';
											display: flex;
											align-items: flex-end;
										}
									}

									.add-cart {
										width: 52rpx;
										height: 52rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										background-color: #fff;
										border-radius: 50% 50%;

										image {
											width: 28rpx;
											height: 24rpx;
											display: block;
										}
									}
								}

							}
						}
					}

					.bill-empty {
						width: 100%;
						min-height: 90vh;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						color: #999999;
						background-color: #fff;
						border-radius: 40rpx;

						image {
							width: 620rpx;
							height: 308rpx;
							display: block;
							margin-bottom: 24rpx;
						}
					}

				}


			}



		}

		.sign-icon {
			position: fixed;
			right: 0;
			top: 70%;

			image {
				width: 80rpx;
				height: auto;
				display: block;
			}
		}

		.popup-signIn {
			width: 100%;
			height: 60vh;
			background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/sigin-bgImg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 48rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;

			header {
				width: 364rpx;
				position: relative;
				z-index: 100;

				image {
					width: 100%;
					height: auto;
					display: block;
				}

			}

			section {
				width: 100%;
				height: 100%;
				color: #32B499;
				background: linear-gradient(180deg, #34D7B5 0%, #FFFFFF 59%, #FFFFFF 100%);
				border-radius: 32rpx;
				position: relative;
				top: -26rpx;
				display: flex;
				flex-direction: column;
				padding: 60rpx 48rpx 48rpx;
				box-sizing: border-box;

				.sect-box {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					.sect-bigBox {
						width: 80%;
						height: auto;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						background-color: #fff;
						border-radius: 8px;
						box-shadow: 4rpx 4rpx 8rpx 0px rgba(0, 0, 0, 0.1);
						padding: 24rpx 0;
						box-sizing: border-box;
					}

					.sect-bigBox1 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;

						image {
							width: 45%;
							height: auto;
							display: block;
						}

					}

					.sect-bigBox2 {
						view {
							color: #333333;
							font-family: 'PingFang SC-Bold';
							font-size: 44rpx;
							margin-bottom: 24rpx;
						}

						image {
							width: 40%;
							height: auto;
							display: block;
							margin-bottom: 24rpx;
						}

						.sign-money {
							color: #EA5F5F;
							font-size: 28rpx;

							text {
								font-size: 48rpx;
								font-family: 'DIN-Medium';
							}

						}

					}

				}


				.sect-btn {
					width: 100%;
					height: 16%;
					background: #32B499;
					border-radius: 44rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20rpx;
				}
			}
		}

		.sign-modalBox {
			width: 540rpx;
			height: 440rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 48rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #333;
			box-sizing: border-box;
			animation-name: animation;
			animation-duration: 1s;
			animation-iteration-count: 1;
			animation-timing-function: ease-in-out;
			-webkit-animation-name: animation;
			-webkit-animation-duration: 1s;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-timing-function: ease-in-out;

			.sign-modalBox-title {
				font-size: 44rpx;
				font-family: 'PingFang SC-Bold';
			}

			image {
				width: 224rpx;
				height: auto;
				display: block;
				margin-top: 48rpx;
				box-sizing: border-box;
			}

			.sign-money {
				font-size: 28rpx;
				color: #EA5F5F;
				margin-top: 24rpx;

				text {
					font-size: 48rpx;
					font-family: 'DIN-Medium';
				}
			}

		}

		@keyframes animation {
			0% {
				transform: scale(0);
				-webkit-transform: scale(0);
			}

			100% {
				transform: scale(1);
				-webkit-transform: scale(1);
			}
		}

	}

	.loading_title {
		padding-top: 20rpx;
	}

	.loading_popup {
		width: 600rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.loading_popup .loading_box {
		overflow: auto;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 45rpx;
	}

	.loading_btn {
		width: 140rpx;
		line-height: 65rpx;
		background-color: #32B499;
		margin: 50rpx auto;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		border-radius: 10rpx;
	}
</style>